<template>
  <div class="table">
    <div class="top">
      <div class="item">
        <div class="label">
          <span>*</span>
          <span>船名航次：</span>
        </div>
        <el-select v-model="form.voyName" @change="voyName" placeholder="搜索查询更多" size="small" clearable filterable
          remote :remote-method="remoteMethod" style="width:150px">
          <!-- +item.iefg -->
          <el-option v-for="item in shipNo" :key="item.id"
            :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')"
            :value="JSON.stringify(item)"></el-option>
        </el-select>
      </div>
      <div class="item">
        <div class="label">
          <span>*</span>
          <span>贸易类型</span>
        </div>
        <el-select v-model="form.tradeFlag" @change="setTra" placeholder="请选择" size="small" clearable filterable
          style="width:150px">
          <el-option :label="item.meaning" :value="item.lowValue" v-for="item,index in dataList.INTERNALFG_IM"
            :key="index"></el-option>
        </el-select>
      </div>
      <div class="item" v-if="!noBill">
        <div class="label">
          <span></span>
          <span>提单号：</span>
        </div>
        <el-input v-model="form.billNo" placeholder="请输入" size="small" style="width:120px">
        </el-input>
      </div>
      <div class="item">
        <div class="label">
          <span></span>
          <span>箱号：</span>
        </div>
        <el-input v-model="form.cntrNo" placeholder="请输入" size="small" style="width:120px">
        </el-input>
      </div>
      <div class="item">
        <el-button type="primary" class="search" @click="getDate">查询</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" @selection-change="handleSelectionchangeS"
        :header-cell-style="{ background: '#EEF1F5'}" style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="cntrno" label="箱号" width="180">
        </el-table-column>
        <el-table-column prop=" billno" label="提单号" width="180">
          <template slot-scope="scope">
            {{ scope.row.containerGoodList && scope.row.containerGoodList.length ?
            scope.row.containerGoodList[0].planGoods.billno || '' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="ctypecd" label="船公司箱型" width="180">
        </el-table-column>
        <el-table-column prop="cstCopercd" label="持箱人" min-width="220">
          <template slot-scope="scope">
            {{ (scope.row.cstCopercd || '') + '/' + (scope.row.cstCoperName || '') }}
          </template>
        </el-table-column>
        <el-table-column prop="voyName" label="进口船名航次" width="180">
          <template slot-scope="scope">
            {{ scope.row.voyName}}
          </template>
        </el-table-column>
        <el-table-column prop="cweight" label="箱货总量" width="180">
        </el-table-column>
        <el-table-column prop="cstOwnercd" label="箱控公司" width="180">
        </el-table-column>
        <!-- <el-table-column prop="termCode"
                         label="所属码头"
                         width="180">
        </el-table-column> -->
        <!-- <el-table-column prop="workZone"
                         label="作业区"
                         width="180">
        </el-table-column> -->
        <el-table-column prop="internalfg" label="贸易类型" width="180">
          <template slot-scope="scope">
            {{ scope.row.internalfg == 'Y' ? '内贸' :scope.row.internalfg == 'N' ? '外贸' : (scope.row.internalfg || '') }}
          </template>
        </el-table-column>
        <el-table-column prop="planGoods.gname" label="货名" width="180">
          <template slot-scope="scope">
            {{ scope.row.containerGoodList && scope.row.containerGoodList.length ?
            scope.row.containerGoodList[0].planGoods.gname || '' : '' }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="consignee"
                         label="货主"
                         width="180">
        </el-table-column> -->
        <!-- <el-table-column prop="gagent"
                         label="货代"
                         width="180">
        </el-table-column> -->
        <!-- <el-table-column prop="markerno"
                         label="唛头"
                         width="180">
        </el-table-column> -->
        <!-- <el-table-column prop="dtpDnggCd"
                         label="危类"
                         width="180">
        </el-table-column> -->
        <!-- <el-table-column prop="unno"
                         label="UNNO"
                         width="180">
        </el-table-column> -->
        <!-- <el-table-column prop="temperature"
                         label="温度"
                         width="180">
        </el-table-column> -->
        <!-- <el-table-column prop="tempUnit"
                         label="温度单位"
                         width="180">
        </el-table-column> -->
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  name: 'boxNumTable',
  components: {},
  props:{
    noBill:{
      default:false
    }
  },
  data() {
    return {
      dataList: {
        termList: [{ key: 'HX', value: '河西码头' }],
      },
      form: {
        termCode: '',
        planTag: 'PF',
      },
      oriForm: {
        termCode: '',
        planTag: 'PF',
      },
      form1: {},
      tableData: [],
      shipNo: [],
      selection: [],
    }
  },

  methods: {
    setTra(val) {
      // "0A"  提重(内贸)
      //"01" 提重（外贸）
      if (val === 'Y') {
        this.form.opmode = '0A'
      } else {
        this.form.opmode = '01'
      }
    },
    handleSelectionchangeS(val) {
      this.selection = val
      //this.$refs.table.toggleRowSelection(val, true);
    },
    voyName(item) {
      console.log(item)
      this.form.voyId = JSON.parse(item).id
      this.form.voyName = JSON.parse(item)?.vessels?.vslName || JSON.parse(item)?.vslName || ''
      this.form.termCode = JSON.parse(item).termCode
      console.log(JSON.parse(item))
      console.log(this.form)
      this.$emit('setTerm',JSON.parse(item).termCode)
    },
    getDate() {
      console.log(88888)
      if (!this.form.voyName) {
        this.$message.error('请选择船名航次')
        return
      }
      if (!this.form.tradeFlag) {
        this.$message.error('请输入贸易类型')
        return
      }
      //this.$emit('set',this.form.termCode)
      this.$api
        .tosGetContainer(this.form)
        .then((res) => {
          this.tableData = res.data
        })
        .catch(res=>{
          this.tableData=[]
        })
      //this.$api.
      //this.$emit('search',this.form)
      // console.log(88888)
      // if (this.form.termCode) {
      //   this.$message.error('请选择码头')
      //   return
      // }
    },
    remoteMethod(val = ''){
      
      console.log(this.$route.name,'查询船名航次----------------');
      this.$api.voyagesVslVoy({
        termCode:'',//码头编码
        schedulesType:this.$route.name == 'heayBoxNum'?'CONTAINER':'',//件散货BULK_CARGO，集装箱CONTAINER
        iefg:this.$route.name == 'heayBoxNum'?'I':'',//进出口 进口I,出口E
        something:val,//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
      }).catch()
    },
    setFile() {
      this.dataList = {
        INTERNALFG_IM: [],
        sell: [],
        customer: [],
        consignor: [],
        cstTrnscomCd: [],
        workZone: [],
      }

      this.$api.voyagesVslVoy({
        termCode:'',//码头编码
        schedulesType:this.$route.name == 'heayBoxNum'?'CONTAINER':'',//件散货BULK_CARGO，集装箱CONTAINER
        iefg:this.$route.name == 'heayBoxNum'?'I':'',//进出口 进口I,出口E
        something:'',//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
      }).catch()

      this.$api
        .refCode({
          domain: 'INTERNALFG_IM',
        })
        .then((res) => {
          this.dataList.INTERNALFG_IM = res.data.data
          this.$forceUpdate()
        })
        .catch()
      // let info=localStorage.getItem('userInfo')
      // console.log(info)
      // if (undefined !== info) {
      //   this.form.cstCopercd = JSON.parse(info).customerCode
      //   this.form.cstCoperName = JSON.parse(info).name
      // }
    },
  },

  computed: {},
  created() {
    this.setFile()
  },
  mounted() {},
}
</script>
<style lang='less' scoped>
.table {
  background: #fff;

  .top {
    padding: 20px;
    border-bottom: 1px solid #d7d7d7;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 16px;
    display: flex;

    .item {
      display: flex;
      align-items: center;
      margin-right: 20px;

      .label {
        margin-right: 5px;

        span:first-child {
          color: #ff3838;
        }
      }
    }

    .search {
      background: #0f47b8;
      height: 30px;
      padding: 5px 10px;
    }
  }

  .table {
    padding: 20px;
  }
}
</style>